<template>
  <div class="resultBox">
    <!-- 卡片 -->
    <el-card shadow="always" class="cardBox">
      <!-- 展示结果 -->
      <el-row>
        <el-col>
          <h1>测试结果：{{ this.recode.result }}</h1>
        </el-col>
      </el-row>
      <!-- 填写表单 -->
      <el-form
        :model="recode"
        :rules="recodeRules"
        ref="recodeRef"
        label-width="auto"
      >
        <el-form-item label="代号" prop="username">
          <el-input v-model="recode.username"></el-input>
        </el-form-item>
        <el-form-item label="四级成绩">
          <el-input v-model="recode.cet4"></el-input>
        </el-form-item>
        <el-form-item label="六级成绩">
          <el-input v-model="recode.cet6"></el-input>
        </el-form-item>
        <el-form-item label="测试结果">
          <el-input v-model="recode.result" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 展示表格 -->
      <el-table :data="infolist" style="width: 90%" strip>
        <el-table-column prop="username" label="代号" width="180">
        </el-table-column>
        <el-table-column prop="cet4" label="四级成绩" width="180">
        </el-table-column>
        <el-table-column prop="cet6" label="六级成绩"> </el-table-column>
        <el-table-column prop="result" label="测试结果"> </el-table-column>
        <el-table-column prop="testDate" label="测试时间" width="180">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recode: {
        username: "",
        cet4: 0,
        cet6: 0,
        result: 0,
      },
      infolist: [],
      // 验证规则
      recodeRules: {
        username: [
          { required: true, message: "请输入代号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.posInfo();
  },
  methods: {
    // 拿到参数 发送给服务端
    posInfo() {
      // console.log("1234567890");
      this.recode.result = this.$route.query.info;
      // console.log(this.recode.result);
      this.$axios.get("getRecord").then((res) => {
        this.infolist = res.data.data;
      });
    },
    //提交数据
    submit() {
      this.$refs.recodeRef.validate((valid) => {
        if (!valid) {
          return;
        }
        // 把表单内容提交给服务器
        this.$axios.post("addRecord", this.recode).then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            this.posInfo();
            // 提交数据之后 重置表单
            this.reset();
            this.recode.result = 0;
            // 重新渲染一下表格数据
          } else {
            alert(res.data.msg);
          }
        });
      });
    },
    // 重置表单
    reset() {
      this.recode.username = "";
      this.recode.cet4 = 0;
      this.recode.cet6 = 0;
    },
  },
};
</script>

<style scoped>
.resultBox {
  width: 80%;
  height: 100vh;
  margin: 0 auto;
  overflow-y: auto;
}
.el-col {
  text-align: center;
}
.el-col h1 {
  color: #409eff;
}
.el-form {
  margin: 20px 0;
  width: 600px;
  margin: 0 auto;
}
.el-table {
  margin: 0 auto;
}
</style>